<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="关于本站">
        <el-form :model="form" ref="form" label-width="80px">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱">
            </el-input>
          </el-form-item>
          <el-form-item label="网站说明" prop="description">
            <el-input v-model="form.description" placeholder="请输入网站说明">
            </el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <editor v-model="form.content" :min-height="192" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="button-save" @click="submitForm" v-hasPermi="['nav:config:update']">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import Editor from '@/components/Editor'
  import {  getConfig, update} from '@/api/nav/config'
  export default {
    name: "navConfig",
    components: {
      Editor,
    },
    data() {
      return {
        form: {
        },
      };
    },
    created() {
      this.getConfig();
    },
    methods: {
      getConfig() {
        getConfig().then(response => {
          if(response.data!=undefined){
            this.form = response.data;
            this.$modal.msgSuccess(response.msg);
          }
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            update(this.form).then((response) => {
              this.$modal.msgSuccess("提交成功");
            }).catch(() => {
               this.$modal.msgError("请求异常");
            });
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .app-container {
    position: relative;
    .button-save {
      position: absolute;
      right: 10px;
      margin-bottom: 10px;
    }
  }
</style>
